<template>
    <div class="bwl-add">
        <!-- 平台单选框 -->
        <van-field label="平台">
            <template #input>
                <van-radio-group v-model="platform" direction="horizontal">
                    <van-radio name="1">京东</van-radio>
                    <van-radio name="2">淘宝</van-radio>
                    <van-radio name="3">拼多多</van-radio>
                </van-radio-group>
            </template>
        </van-field>

        <!-- 任务输入框 -->
        <van-field
            v-model="task"
            name="username"
            label="任务"
            placeholder="如：拍台灯"
        />

        <!-- 本金 -->
        <van-row type="flex" justify="space-between" align="center">
            <!-- 本金输入框 -->
            <van-col :span="14">
                <van-field
                    v-model="benjin"
                    type="digit"
                    label="本金"
                    placeholder="0"
                >
                    <template #button>元</template>
                </van-field>
            </van-col>

            <!-- 本金是否已返 -->
            <van-col :span="10">
                <van-checkbox v-model="is_benjin_return" shape="square"
                    >本金已返</van-checkbox
                >
            </van-col>
        </van-row>

        <!-- 佣金 -->
        <van-row type="flex" justify="space-between" align="center">
            <!-- 佣金输入框 -->
            <van-col :span="14">
                <van-field
                    v-model="yongjin"
                    type="digit"
                    label="佣金"
                    placeholder="0"
                >
                    <template #button>元</template>
                </van-field>
            </van-col>

            <!-- 佣金是否已返 -->
            <van-col :span="10">
                <van-checkbox v-model="is_yongjin_return" shape="square"
                    >佣金已返</van-checkbox
                >
            </van-col>
        </van-row>

        <!-- 备注输入框 -->
        <van-field
            v-model="mark"
            rows="2"
            autosize
            label="备注"
            type="textarea"
            maxlength="50"
            placeholder="输入备注，没有可不写"
            show-word-limit
        />

        <!-- 提交按钮 -->
        <van-button type="primary" block @click="onAddClicked">提交</van-button>
    </div>
</template>

<script>
export default {
    data() {
        return {
            platform: "",
            task: "",
            benjin: "",
            is_benjin_return: false,
            yongjin: "",
            is_yongjin_return: false,
            mark: "",
        };
    },
    methods: {
        async onAddClicked() {
            const {
                platform,
                task,
                benjin,
                is_benjin_return,
                yongjin,
                is_yongjin_return,
                mark,
            } = this;

            // 需要
            // is_benjin_return = is_benjin_return ? 1 : 0;
            // is_yongjin_return = is_yongjin_return ? 1 : 0;

            // 发送添加请求
            const res = await this.$http.post("/bwls", {
                platform,
                task,
                benjin,
                is_benjin_return,
                yongjin,
                is_yongjin_return,
                mark,
            });

            // 添加失败
            console.log(res);
            if (res.code !== 201) {
                this.$notify(res.message);
                return;
            }
            // 添加成功
            this.$notify({
                type: "success",
                message: res.message,
            });
            // 跳转列表
            this.$router.push("/bwl/list");
        },
    },
};
</script>
